<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { i18n } from 'boot/i18n'
import api from 'src/api'

const tc = i18n.global.tc

// 当前选中的标签页
const tab = ref('terms')

// 预定须知
const termsContent = ref('')
const loadingTerms = ref(false)

// 获取预定须知
const fetchTerms = async () => {
  loadingTerms.value = true
  try {
    const response = await api.service.txMeeting.getTermsConditions()
    termsContent.value = response.data.content
  } catch (error) {
    console.error('Error fetching terms conditions:', error)
  } finally {
    loadingTerms.value = false
  }
}

onMounted(() => {
  fetchTerms()
})

// 帮助主题
const helpTopics = [
  {
    title: tc('基本操作'),
    value: 'basic',
    icon: 'help_outline',
    content: [
      {
        question: tc('如何预定会议？'),
        answer: tc('点击左侧"预定会议"按钮，填写会议信息（会议号、主题、时间等），选择合适的会议室资源，然后点击"确认预定"按钮完成预定。')
      },
      {
        question: tc('如何查看我已预定的会议？'),
        answer: tc('点击左侧"我的预定"按钮，可以在日历视图或列表视图中查看所有已预定的会议。')
      },
      {
        question: tc('如何取消会议预定？'),
        answer: tc('在"我的预定"页面中，找到要取消的会议，点击查看详情，然后点击"取消预定"按钮。')
      }
    ]
  },
  {
    title: tc('会议室资源'),
    value: 'resources',
    icon: 'room',
    content: [
      {
        question: tc('有哪些类型的会议室资源？'),
        answer: tc('系统提供了四种规格的虚拟会议室：50方、100方、300方和500方，分别适合不同规模的会议。')
      },
      {
        question: tc('会议室容量是什么意思？'),
        answer: tc('会议室容量指的是可容纳的参会人数上限，例如50方会议室可容纳最多50人参会。')
      },
      {
        question: tc('如何选择合适的会议室？'),
        answer: tc('根据预计参会人数选择合适容量的会议室，系统会自动显示当前时间段可用的会议室资源。')
      }
    ]
  },
  {
    title: tc('账号设置'),
    value: 'account',
    icon: 'settings',
    content: [
      {
        question: tc('如何修改个人信息？'),
        answer: tc('点击左侧"个人设置"按钮，在个人信息区域点击"编辑信息"按钮进行修改。')
      },
      {
        question: tc('如何设置会议提醒？'),
        answer: tc('在"个人设置"页面的通知设置区域，可以选择开启邮件提醒、短信提醒或站内信提醒，并设置提醒时间。')
      },
      {
        question: tc('如何修改密码？'),
        answer: tc('在"个人设置"页面的账号安全区域，点击"修改密码"按钮，填写当前密码和新密码后确认修改。')
      }
    ]
  },
  {
    title: tc('常见问题'),
    value: 'faq',
    icon: 'question_answer',
    content: [
      {
        question: tc('预定失败可能是什么原因？'),
        answer: tc('可能原因包括：所选时间段资源已被占用、会议时间冲突、系统维护等，请尝试选择其他时间段或联系管理员。')
      },
      {
        question: tc('会议开始后多久会自动释放资源？'),
        answer: tc('如果会议在预定开始时间后30分钟内未开始，系统将自动释放资源，该预定将标记为"已取消"。')
      },
      {
        question: tc('如何联系客服？'),
        answer: tc('如有任何问题，请发送邮件至support@example.com或拨打客服热线：400-123-4567。')
      }
    ]
  }
]
</script>

<template>
  <q-scroll-area style="height: calc(100vh - 50px)">
    <div class="q-pa-md">
      <h5 class="q-mt-none q-mb-md">{{ tc('帮助/指南') }}</h5>

      <q-card>
        <q-tabs
          v-model="tab"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab name="terms" :label="tc('预定须知')" icon="gavel" />
          <q-tab
            v-for="topic in helpTopics"
            :key="topic.value"
            :name="topic.value"
            :icon="topic.icon"
            :label="topic.title"
          />
        </q-tabs>

        <q-separator />

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="terms">
             <div class="text-h6 q-mb-md">{{ tc('预定须知') }}</div>
             <q-card-section v-if="loadingTerms">
               <q-skeleton type="text" height="100px" />
             </q-card-section>
             <q-card-section v-else>
               <div v-html="termsContent"></div>
             </q-card-section>
           </q-tab-panel>

          <q-tab-panel v-for="topic in helpTopics" :key="topic.value" :name="topic.value">
            <div class="text-h6 q-mb-md">{{ topic.title }}</div>

            <q-list separator>
              <q-expansion-item
                v-for="(item, index) in topic.content"
                :key="index"
                :label="item.question"
                header-class="text-primary"
                group="help-topics"
                icon="help"
              >
                <q-card>
                  <q-card-section>
                    {{ item.answer }}
                  </q-card-section>
                </q-card>
              </q-expansion-item>
            </q-list>
          </q-tab-panel>
        </q-tab-panels>

        <q-card-section class="q-pt-none">
          <div class="text-center q-mt-md">
            <p class="text-grey-8">
              {{ tc('如有其他问题，请联系系统管理员或技术支持团队') }}
            </p>
            <q-btn
              outline
              color="primary"
              :label="tc('联系客服')"
              icon="support_agent"
              href="mailto:support@example.com"
            />
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-scroll-area>
</template>
